<template>
  <div>
     <div class="tab_byns">
        <el-button type="primary" size="small"  @click="toFormHandler"> 新增</el-button>
      </div>

      <div class="tab_content">          
          <el-table
      :data="roleprivilege"
      style="width: 100%">
      <el-table-column
        prop="id"
        label="序号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="roleId"
        label="用户ID"
        width="180">
      </el-table-column>
      <el-table-column
        prop="privilegeId"
        label="权限ID">
      </el-table-column>

       <!-- 操作列 -->
        <el-table-column width="100" align="center" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="editHandler(scope.row)">修改</el-button>
            <el-button type="text" @click="deleteHandler(scope.row)">删除</el-button>
          </template>
        </el-table-column>

    </el-table>
      </div>
  </div>
</template>

<script>
import {del, get} from "@/utils/request"
export default {
   //定义变量，在模板中直接用
    data(){
        return {
            roleprivilege:[],
            visible:false
        }
    },
    //定义事件处理函数、方法
    methods:{
            // 删除的处理函数
    deleteHandler(row){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = "http://localhost:8888/roleprivilege/deleteById"
        del(url,{id:row.id}).then(resp =>{
          // 1. 提示
          this.$message({type:"success",message:resp.message});
          // 2. 刷新
          this.loadRoleprivilege();
        })         
      })
    },
    // 修改的处理函数
    editHandler(row){
      this.$router.push({ 
        path:"/lilu/roleprivilegeform" ,
        query:row
      })
    },
    // 跳转到新增页面
    toFormHandler(){
      // 跳转
      this.$router.push({ path:"/lilu/roleprivilegeform" })
    },
        //查询所有数据
        loadRoleprivilege(){
            let url = "http://localhost:8888/roleprivilege/query"
            get(url).then(resp => {
                //获取数据后做的事情
                this.roleprivilege = resp.data;
                // console.log(this.interfaces);
            })
        }
    },
    //生命周期钩子函数
    created(){
       this.loadRoleprivilege();
    }
}
</script>

<style lang="sass" scoped>

</style>
